<template>
  <image-upload v-model="picUrls" v-bind="renderOpts.props">
    <template #tip>
      <div class="tip" v-if="tips.length > 0">
        <div v-for="tip in tips" :key="tip">{{ tip }}</div>
      </div>
    </template>
  </image-upload>
</template>

<script setup lang="ts">
import ImageUpload from "@/components/Upload/ImageUpload.vue";
import { VxeGlobalRendererHandles } from "vxe-pc-ui";

const props = defineProps({
  renderOpts: {
    type: Object as PropType<VxeGlobalRendererHandles.RenderFormItemContentOptions>,
    default: () => ({}),
  },
  params: {
    type: Object as PropType<VxeGlobalRendererHandles.RenderFormItemContentParams>,
    default: () => ({}),
  },
});

const tips = computed(() => {
  if (!props.renderOpts.attrs?.tips) {
    return [];
  }
  if (Array.isArray(props.renderOpts.attrs?.tips)) {
    return props.renderOpts.attrs.tips;
  }
  return [props.renderOpts.attrs.tips];
});

const picUrls = computed({
  get() {
    if (props?.params?.data?.[props.params.field]) {
      return [props.params.data[props.params.field]];
    }
    return [];
  },
  set(value) {
    props.params.data[props.params.field] = value.join(";");
  },
});
</script>

<style scoped>
.tip {
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  margin-top: 15px;
  color: #999;
}
</style>
